<template>
  <!--文本框/跑马灯/超链接-->
  <componentBox :id="id" :ref="id" :option="config.location">
    <div :style="getBoxStyle()">
      <marquee v-if="option.move"  scrolldelay="1" :scrollamount="option.speed">
        <span :style="getStyle()" v-on:click="jump()">{{option.text}}</span>
      </marquee>
      <span v-else :style="getStyle()" v-on:click="jump()">{{option.text}}</span>
    </div>
  </componentBox>
</template>

<script>
  export default {
    name: "screen_text",
    components: {
      'componentBox': () => import('@/components/screen/componentBox.vue'),
    },
    computed: {
      //判断是否可以操作dom
      screenMove() {
        return this.$store.state.screenMove
      },

    },
    data(){
      return{
          option:{},
      }
    },
    props: {
      id: String,
      config: Object,
    },
    created() {
      this.option=this.config.option;
    },
    methods: {

      //跳转连接
      jump() {
        if(!this.option.jump){
          return;
        }
        //判断是否开启了跳转功能
        if (this.option.jumpType == 'open') {
          //外部打开
          window.open(this.option.jumpUrl);
        } else if(this.option.jumpType == 'local') {
          window.location.href=this.option.jumpUrl;
        }
      },

      //设置容器的样式
      getBoxStyle() {
        return {
          //字体对齐方式
          "text-align": this.option.textAlign,
        }
      },

      //设置样式
      getStyle() {
        return {
          //字体颜色
          "color": this.option.color,
          //字体大小
          "font-size": this.option.fontSize + "px",
          //字体加粗
          "font-weight": this.option.fontWeight,
          //字体背景
          "background-color": this.option.backgroundColor,
          //字体间距
          "letter-spacing": this.option.letterSpacing + "px",
          //字体行高
          "line-height": this.option.lineHeight + "px",
        }
      }
    }
  }
</script>

<style scoped>


</style>
